<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>蓝天驾校 - 教练管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .layui-layout-admin .layui-header {
            background-color: #409EFF;
        }
        
        .layui-side {
            background-color: #F5F7FA;
        }
        
        .layui-nav {
            background-color: #F5F7FA;
            color: #303133;
        }
        
        .layui-nav-tree .layui-nav-item a {
            color: #303133;
        }
        
        .layui-nav-tree .layui-nav-item a:hover {
            background-color: #E4F2FF;
            color: #409EFF;
        }
        
        .layui-nav-tree .layui-nav-child dd.layui-this, 
        .layui-nav-tree .layui-nav-child dd.layui-this a, 
        .layui-nav-tree .layui-this, 
        .layui-nav-tree .layui-this>a, 
        .layui-nav-tree .layui-this>a:hover {
            background-color: #E4F2FF;
            color: #409EFF;
        }
        
        .layui-nav-tree .layui-nav-bar {
            background-color: #409EFF;
        }
        
        .layui-card-header {
            border-bottom: 1px solid #EBEEF5;
            color: #303133;
            font-weight: 600;
        }
        
        .layui-btn-primary {
            border: 1px solid #EBEEF5;
            color: #606266;
        }
        
        .layui-btn-primary:hover {
            border-color: #409EFF;
            color: #409EFF;
        }
        
        .layui-btn {
            background-color: #409EFF;
        }
        
        .layui-btn-danger {
            background-color: #F56C6C;
        }
        
        .layui-table thead tr {
            background-color: #F5F7FA;
        }
        
        .layui-table th {
            font-weight: 600;
            color: #303133;
        }
        
        .layui-form-checkbox[lay-skin="primary"]:hover i {
            border-color: #409EFF;
        }
        
        .layui-form-checked[lay-skin="primary"] i {
            border-color: #409EFF;
            background-color: #409EFF;
        }
        
        .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #409EFF;
        }
        
        .layui-input:focus, .layui-textarea:focus {
            border-color: #409EFF !important;
        }
        
        .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .admin-info {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #EBEEF5;
        }
        
        .admin-name {
            color: #303133;
            font-weight: 600;
        }
        
        .admin-role {
            color: #909399;
            font-size: 12px;
        }
        
        /* 教练管理页面特有样式 */
        .search-form {
            padding: 15px;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
        }
        
        .search-form .layui-form-item {
            margin-bottom: 0;
        }
        
        .search-form .layui-form-label {
            width: auto;
            padding: 9px 5px;
        }
        
        .search-form .layui-input-block {
            margin-left: 70px;
        }
        
        .batch-operation {
            margin-bottom: 15px;
        }
        
        .teacher-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        /* 错误提示样式 */
        .layui-form-danger {
            border-color: #F56C6C !important;
        }
    </style>
</head>
<body class="layui-layout-body">
    <!-- 管理系统主页面 -->
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航 -->
        <div class="layui-header">
            <div class="layui-logo">蓝天驾校管理系统</div>
            
            <ul class="layui-nav layui-layout-right" style="background-color: #409EFF;">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-email"></i>
                        <span class="layui-badge-dot"></span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-notice"></i>
                        <span class="layui-badge">3</span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="https://picsum.photos/id/1025/200/200" class="layui-nav-img">
                        管理员
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" id="personalInfo">个人信息</a></dd>
                        <dd><a href="javascript:;" id="changePassword">修改密码</a></dd>
                        <hr>
                        <dd><a href="/zrz/daohanglanLayui" id="logout">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        
        <!-- 左侧导航 -->
        <div class="layui-side layui-bg-white">
            <div class="admin-info">
                <img src="https://picsum.photos/id/1025/200/200" class="user-avatar">
                <div>
                    <div class="admin-name">系统管理员</div>
                    <div class="admin-role">管理员</div>
                </div>
            </div>
            
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="leftMenu">
                    <li class="layui-nav-item">
                        <a href="/zrz/guanliyuanXXLayui"><i class="layui-icon layui-icon-home"></i> 系统首页</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-user"></i> 学员管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="student-list.html">学员列表</a></dd>
                            <dd><a href="javascript:;" data-url="student-add.html">新增学员</a></dd>
                            <dd><a href="javascript:;" data-url="student-import.html">批量导入</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-user"></i> 教练管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="teacher-list.html">教练列表</a></dd>
                            <dd><a href="javascript:;" data-url="teacher-add.html">新增教练</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-file"></i> 课程管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="course-list.html">课程列表</a></dd>
                            <dd><a href="javascript:;" data-url="course-add.html">新增课程</a></dd>
                            <dd><a href="javascript:;" data-url="course-schedule.html">课程安排</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-template"></i> 评价管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="review-list.html">学员评价</a></dd>
                            <dd><a href="javascript:;" data-url="review-analysis.html">评价分析</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="/zrz/baomingXXGL"><i class="layui-icon layui-icon-template"></i> 报名信息管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="layui-icon layui-icon-set"></i> 系统设置</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" data-url="admin-list.html">管理员列表</a></dd>
                            <dd><a href="javascript:;" data-url="admin-add.html">新增管理员</a></dd>
                            <dd><a href="javascript:;" data-url="system-config.html">系统配置</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 中间内容区域 -->
       <!-- 中间内容区域 -->
       <div class="layui-body" id="content-container">
        <div class="layui-tab layui-tab-brief" lay-filter="content-tabs">
            <ul class="layui-tab-title">
                <li class="layui-this" data-id="teacherList">教练管理</li>

                <!-- Tab 内容 -->
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!-- 工具栏 -->
                    <div class="layui-btn-container" style="margin: 15px 0;">
                        <button class="layui-btn" onclick="openAddCoachModal()">添加教练</button>
                    </div>
    
                    <!-- 表格容器 -->
                    <table id="xueyuanTable" lay-filter="xueyuanTable"></table>
                </div>
            </div>
            </ul>
    
            
        </div>
    </div>
        
        
        <!-- 底部信息 -->
        <!-- <div class="layui-footer">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <p>© 2025 蓝天驾校管理系统 版权所有</p>
                    </div>
                    <div class="layui-col-md6 text-right">
                        <p>版本号：v1.0.0</p>
                    </div>
                </div>
            </div>
        </div> -->
    </div>


    

    <script th:inline="none">

        layui.use(['table', 'layer', 'jquery', 'form'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
        
            // 渲染表格并初始化分页
            table.render({
                elem: '#xueyuanTable',
                height: 'full-200',
                url: '/api/jiaolian/all', // 数据接口
                page: true, // 开启分页
                limit: 10, // 每页显示的条数
                limits: [10, 20, 30], // 每页条数的选择项
                cols: [[ // 表头
                    {field: 'id', title: 'ID', width:80, sort: true},
                    {field: 'name', title: '姓名'},
                    {field: 'ssex', title: '性别',  width:180},
                    {field: 'birthday', title: '出生日期'},
                    {field: 'phone', title: '电话'},
                    {field: 'cname', title: '班级'},
                    {field: 'pass', title: '通过率', width:200, sort: true},
                    {fixed: 'right', title:'操作', toolbar: '#xueyuanTableBar'} // 新增的操作列
                ]],
                parseData: function(res){ // 将返回的 json 数据进行解析
                    return {
                        "code": res.code || 0, // 解析接口状态
                        "msg": res.message || '', // 解析提示文本
                        "count": res.length || 0, // 解析数据长度（总条数）
                        "data": res // 解析数据列表
                    };
                },
                request: {
                    pageName: 'page', // 页码的参数名称，默认：page
                    limitName: 'limit' // 每页数据量的参数名，默认：limit
                }
            });

            // 工具条监听
    // 监听工具条
    table.on('tool(xueyuanTable)', function(obj){
        var data = obj.data;

        if (obj.event === 'del') {
            layer.confirm('确定要删除该教练吗？', function(index) {
                $.ajax({
                    url: '/api/jiaolian/' + data.id,
                    method: 'POST',
                    success: function(res) {
                        if (res) {
                            layer.msg('删除成功');
                            obj.del(); // 删除行 DOM
                            layer.close(index);
                        } else {
                            layer.msg('删除失败');
                        }
                    }
                });
            });
        } else if (obj.event === 'edit') {
            // 打开编辑弹窗
            openEditCoachModal(data);
        }
    });


    // 编辑模态框函数
    function openEditCoachModal(data) {
        layer.open({
            type: 1,
            title: '编辑教练信息',
            area: ['500px', '530px'],
            content: `
                <form class="layui-form" style="padding:20px;">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" value="${data.name}" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="text" name="ssex" value="${data.ssex}" required lay-verify="required" placeholder="请输入性别" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" value="${data.phone}" required lay-verify="required" placeholder="请输入电话" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="birthday" value="${data.birthday}" required lay-verify="required" placeholder="请输入出生日期" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">通过率</label>
                        <div class="layui-input-block">
                            <input type="text" name="pass" value="${data.pass}" required lay-verify="required" placeholder="请输入通过率" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">班级</label>
                        <div class="layui-input-block">
                            <input type="text" name="cname" value="${data.cname}" required lay-verify="required" placeholder="请输入班级" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">驾照类型</label>
                        <div class="layui-input-block">
                            <input type="text" name="type" value="${data.type}" required lay-verify="required" placeholder="请输入驾照类型" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="editCoachForm">保存</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(layero, index) {
                form.render(); // 刷新表单渲染

                // 监听提交事件
                form.on('submit(editCoachForm)', function(formData) {
                    $.ajax({
                        url: '/api/jiaolian/update',
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(formData.field),
                        success: function(res) {
                            if (res) {
                                layer.msg('更新成功');
                                layer.close(index);
                                table.reload('xueyuanTable'); // 刷新表格
                            } else {
                                layer.msg('更新失败');
                            }
                        }
                    });
                    return false; // 阻止默认提交
                });
            }
        });
    }


    window.openAddCoachModal= function () {
    layer.open({
        type: 1,
        title: '新增教练',
        area: ['500px', '550px'],
        content: `
            <form class="layui-form" id="addCoachForm" style="padding:20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="text" name="ssex" required lay-verify="required" placeholder="请输入性别" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话</label>
                    <div class="layui-input-block">
                        <input type="number" name="phone" required lay-verify="required" placeholder="请输入电话" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <input type="text" name="cname" required lay-verify="required" placeholder="请输入班级" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="birthday" required lay-verify="required" placeholder="请输入出生日期" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">通过率</label>
                    <div class="layui-input-block">
                        <input type="text" name="pass" required lay-verify="required" placeholder="请输入通过率" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">驾照类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="type" required lay-verify="required" placeholder="请输入驾照类型" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="addCoachForm">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        `,
        success: function(layero, index) {
            // 初始化表单渲染
            layui.form.render();

            // 绑定提交事件
            layui.form.on('submit(addCoachForm)', function(formData) {
                $.ajax({
                    url: '/api/jiaolian/create',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData.field),
                    success: function(res) {
                        if (res) {
                            layer.msg('添加成功');
                            layer.close(index);
                            layui.table.reload('xueyuanTable'); // 刷新表格
                        } else {
                            layer.msg('添加失败');
                        }
                    },
                    error: function() {
                        layer.msg('请求失败，请检查网络或接口地址');
                    }
                });
                return false; // 阻止默认表单提交
            });
        }
    });
}
            

        });
        
        
        </script>



<!-- 工具条模板 -->
<script type="text/html" id="xueyuanTableBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


        
                    
        
    

</body>
</html>